<template>
    <div class="m-progress" :style="`width:${width}px;`">
        <div class="m-progress-outer">
            <div class="mpo-title">{{ text }}</div>
            <div class="m-progress-inner">
                <div class="u-progress-bg" :style="`width: ${progress}%;`">
                    <div class="u-progress-text">{{ progressText }}</div>
                </div>
                <div class="u-progress-text2">{{ totalProgressText }}</div>
                <div class="u-progress-line" :style="`left: ${progress}%;`"></div>
                <div class="u-progress-text3" :style="`left: ${progress}%;`">{{ progress }}</div>
            </div>
        </div>
        <!-- <span class="u-progress-text">{{ progress }}%</span> -->
    </div>
</template>
<script>
export default {
    name: 'Progress',
    props: {
        width: {
            type: Number,
            default: 220
        },
        progress: {
            type: Number,
            default: 80
        },
        progressText: {
            type: Number,
            default: 100
        },
        totalProgressText: {
            type: Number,
            default: 200
        },
        text: {
            type: String,
            default: '实时产量'
        },
        left:{
            type: Number,
            default: 90
        },

    }
}
</script>
<style lang="less" scoped>
.m-progress {
    color: rgba(0, 0, 0, .65);
    margin: auto;

    .m-progress-outer {
        display: inline-block;
        width: calc(100%);

        .m-progress-inner {
            width: 100%;
            background-color: #f5f5f5;
            border-radius: 6px;
            position: relative;
            border: 1px solid #409eff;

            .u-progress-bg {
                background-color: #66e427;
                border-radius: 6px;
                height: 26px;
                transition: all .3s cubic-bezier(.08, .82, .17, 1) 0s;
                position: relative;
            }

        }
    }

    .u-progress-text {
        position: absolute;
        color: #fff;
        height: 26px;
        top: 0;
        line-height: 26px;
        left: 10px;
        font-weight: bold;
    }

    .u-progress-text2 {
        position: absolute;
        color: #000;
        height: 26px;
        top: 0;
        line-height: 26px;
        right: 10px;
        font-weight: bold;
    }

    .mpo-title {
        color: #000;
        margin-bottom: 20px;
        font-weight: bold;
    }

    .u-progress-line {
        background: rgb(33, 153, 228);
        width: 2px;
        height: 44px;
        position: absolute;
        left: 0;
        border-radius: 10px;
        bottom: 0;

    }

    .u-progress-text3 {
        position: absolute;
        color: #000;
        bottom: 47px;
        left: 0;
        font-weight: bold;
        margin-left: -7px;
    }

}
</style>